<div class="region-box">
  <!-- <img src="./assets/images/map/region.png" alt="" /> -->
  <nz-cascader
    [nzTriggerAction]="'hover'"
    [nzExpandTrigger]="'hover'"
    [nzOptions]="regions"
    [nzAllowClear]="false"
    nzPlaceHolder=""
    [(ngModel)]="regionSelected"
    [nzChangeOn]="validate"
    (ngModelChange)="onChangeRegion($event)"
  ></nz-cascader>
  <!-- <div class="region-text" (click)="regionsShow = !regionsShow">
    <i class="icon-region" nz-icon nzType="environment" nzTheme="twotone"></i>
    <i nz-icon nzType="down" nzTheme="outline"></i>
    <span>{{ regionSelected.name }}</span>
  </div>
  <ul class="regions" [hidden]="!regionsShow">
    <li *ngFor="let item of regions" (click)="item.show = !item.show;">
      <i nz-icon nzType="down" nzTheme="outline" *ngIf="item.children" [style.paddingRight]="'10px'"></i>
      <span [style.paddingLeft]="item.children ? 0 : '24px'">{{item.name}}</span>
      <ul *ngIf="item.children" [hidden]="!item.show">
        <li *ngFor="let c of item.children" (click)="onSelectRegion(c)">{{ c.name }}</li>
      </ul>
    </li>
  </ul> -->
</div>
